/*
 * @Descripttion: 
 * @version: 
 * @Author: lichangbo
 * @Date: 2021-01-06 22:48:09
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-01-07 23:01:27
 */
/*
    一般会单独抽取到 hook 文件夹下，这里做演示
*/
import { reactive,toRefs } from 'vue'

export interface ShopList {
    shopList: AjaxDataModel.DataKey[];
}

export function getData() {
    const data = reactive<ShopList>({
        shopList: [
            {
                id: 0,
                name: '瓜子',
                price: 5,
            },
            {
                id: 1,
                name: '啤酒',
                price: 20,
            },
            {
                id: 2,
                name: '辣条',
                price: 2,
            }
        ]
    })
    const { shopList } = toRefs(data)
    // 当需要返回 响应式对象时，可以通过 toRefs，使其在不丢失响应式时进行解构，分解
    // 更多的是 直接在此进行数据操作
    return  shopList
}

/*
    ps: 
    例如本次：通过 reactive 建立一个响应式对象数据
            需要通过，toRefs 转换，才不会丢失响应式
            外部就直接使用 xxx.value 去修改（因为是 ref 式的，所以是 .value）
            shopList  --->    data.shopList
    
    补充：
        当处理数据，页面无响应时，注意判断数据是否是 各自类型( ref式、reactive )的响应式(isRef、isReactive)
*/ 